<template>
    <div class="digitalEmployee">
        <div class="digitalEmployee-top">
            <div class="digitalEmployee-top-l">
                <div class="digitalEmployee-top-l-title wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.4s">
                    智企AI数字员工
                </div>
                <div class="digitalEmployee-top-l-setails wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.8s">
                    AIGC时代企业专属数字人员工
                </div>
                <div class="digitalEmployee-top-l-consulting wow bounceInLeft" data-wow-delay=".3s"
                    data-wow-duration="1.2s">
                    <vs-button style="background: linear-gradient(90deg, #006FFF 0%, #60DCA7 100%);
                    font-size: 18px;
                    padding: 6px 0;
                    width: 170px;
                    "
                    @click="openInfoDialog">
                        咨询了解 <img style="margin-left:4px"  v-preloadImg="'https://static.pdwl.net/jituan/images/zixun.png'" src="https://static.pdwl.net/jituan/images/zixun.png" alt="">
                        <template #animate>
                            <img v-preloadImg="'https://static.pdwl.net/jituan/images/zixun.png'"  alt="">
                        </template>
                    </vs-button>
                </div>
            </div>
        </div>
        <div class="digitalEmployee-content">
            <div class="content-times flex_cen">
                <div class="content-times-data">
                    <div>人工智能时代</div>
                    <div>每一家企业都需要一个数字员工</div>
                </div>
            </div>
            <div class="content-anchor">
                <div class="head">
                    <div class="head-title wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.4s">智企数字主播</div>
                    <div class="head-details wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.8s">您专属的企业数字主播，卖货+获客轻松搞定</div>
                </div>
                <div class="content-anchor-data flex_spa">
                    <div class="content-anchor-data-l copy-writing copy-writing1">
                        <div>真人形象+声音克隆</div>
                        <div>数字人7*24小时不间断直播</div>
                        <div>数字人口播视频一键生成</div>
                        <div>直播间实时互动</div>
                        <div>多平台多场景直播</div>
                    </div>
                    <div class="content-anchor-data-r">
                        <img v-preloadImg="'https://static.pdwl.net/jituan/images/digitalEmployee/icon4.png'" src="https://static.pdwl.net/jituan/images/digitalEmployee/icon4.png" alt="" srcset="">
                    </div>
                    
                </div>
            </div>
            <div class="content-expert">
                <div class="head">
                    <div class="head-title wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.4s">智企营销专家</div>
                    <div class="head-details wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.8s">您专属的短视频全平台营销获客专家</div>
                </div>
                <div class="content-expert-data flex_spa">
                    <div class="content-expert-data-l">
                        <img  v-preloadImg="'https://static.pdwl.net/jituan/images/digitalEmployee/icon3.png'" src="https://static.pdwl.net/jituan/images/digitalEmployee/icon3.png" alt="" srcset="">
                    </div>
                    <div class="content-expert-data-r copy-writing">
                        <div>多平台矩阵账号管理</div>
                        <div>AI智能化视频创作</div>
                        <div>一键视频全平台发布</div>
                        <div>多维度客户数据统计</div>
                    </div>
                </div>
            </div>
            <div class="content-assistant">
                <div class="head">
                    <div class="head-title wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.4s">智企万能助手</div>
                    <div class="head-details wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.8s">您身边的万能助理，无所不知，无所不晓!</div>
                </div>
                <div class="content-assistant-data flex_spa">
                    <div class="content-assistant-data-l copy-writing">
                        <div>人机智能对话交互</div>
                        <div>高效搜索，替代搜索引擎</div>
                        <div>文案、合同、朋友圈轻松撰写</div>
                        <div>100+专业助理角色</div>
                    </div>
                    <div class="content-assistant-data-r">
                        <img v-preloadImg="'https://static.pdwl.net/jituan/images/digitalEmployee/icon7.png'" src="https://static.pdwl.net/jituan/images/digitalEmployee/icon7.png" alt="" srcset="">
                    </div>
                </div>
            </div>
            <div class="content-case-study">
                <div class="head">
                    <div class="head-title wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.4s">企业成功案例</div>
                    <div class="head-details wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.8s">品达6年，已累计帮助数万家企业进行数字化转型升级，提质增效，获得长足的发展</div>
                </div>
                <div class="content-case-study-data flex_bet">
                    <div class="content-case-study-data-prev">
                        <img  v-preloadImg="'https://static.pdwl.net/jituan/images/digitalEmployee/icon1.png'" src="https://static.pdwl.net/jituan/images/digitalEmployee/icon1.png" alt="" srcset="">
                    </div>
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide flex_cen"
                                v-for="(item,idx) of studyDataList" :key="idx"
                                >
                                <img v-preloadImg="item.nameCaseBgiMG" :src="item.nameCaseBgiMG" alt="" srcset="">
                                <div class="swiper-slide-data">
                                    <div style="margin-top: -10px;">
                                        <div class="swiper-slide-data-title">{{item.nameCase}}</div>
                                        <div class="swiper-slide-data-industry">行业：{{item.industry}}</div>
                                    </div>
                                    <div class="swiper-slide-data-details">
                                        {{item.details}}
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-case-study-data-next">
                        <img v-preloadImg="'https://static.pdwl.net/jituan/images/digitalEmployee/icon2.png'"  src="https://static.pdwl.net/jituan/images/digitalEmployee/icon2.png" alt="" srcset="">
                    </div>
                    <div class="content-case-study-data-bg">

                    </div>
                </div>
            </div>
            <div class="content-case-process">
                <div class="head">
                    <div class="head-title wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.4s">合作流程</div>
                    <div class="head-details wow slideInDown" data-wow-delay=".3s"
                        data-wow-duration="0.8s">品质保障，助企腾达</div>
                </div>
                <div class="content-case-process-data">
                    <div class="content-case-process-data-list flex_cen">
                        <div class="content-case-process-data-list-item"
                            v-for="(item,idx) of processList" :key="idx"
                        >   
                        <div class="flex_start content-case-process-data-list-item-img" >
                            <img class="icon" :src="item.icon" alt="" srcset="">
                            <img class="flow" v-if="idx < processList.length - 1" src="https://static.pdwl.net/jituan/images/digitalEmployee/icon12.png" alt="">
                        </div>
                        <div class="content-case-process-data-list-item-name">
                            {{ item.name }}
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Footer type="2"></Footer>
        <InfoDialog ref="infoDialog"></InfoDialog>
    </div>
</template>
<script>
import  InfoDialog from '@/components/infoDialog'
import Footer from '@/components/footer/index.vue'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css' 
export default {
    components: { Footer,InfoDialog },
    data() {
        return {
            studyDataList:[
                {
                    nameCase: '金春工业自动化科技有限公司 ',
                    details: '金春工业自动化科技有限公司，品达集团牛视短视频营销系统使用企业，2022年3月25日开始使用牛视工厂版。 系统通过企业号运营、AI智能剪辑、智能发布、流量扶持、全媒体运营、AI智能触客等营销方式，截止目前，该企业账号已在抖音800W的企业账号中打败了95.6%的账号。主页访问量1462.6w，新增粉丝共计36942人，粉丝数量达到1648w，牛视为该公司解决了营销难、推广难、获客难、视频制作难等营销痛点，让更多意向客户了解到金春工业成型机的功能、性能，实现了业绩突破，达成了短视频营销目标。 ',
                    nameCaseBgiMG: 'https://static.pdwl.net/jituan/images/digitalEmployee/icon10.png',
                    industry: '传统制造-机械设',
                },
                {
                    nameCase: '格莱天姿木饰面同色一体  ',
                    details: '格莱天姿木饰面自2021年11月使用牛视系统以来，系统通过企业号运营、AI智能剪辑、智能发布、流量扶持、全媒体运营、AI智能触客等营销方式。截止目前，该账号主页访问量1577w，新增粉丝共计16540人，粉丝数量达到948w，牛视为该公司解决了营销、推广、获客、视频制作等营销痛点。视频的高曝光量让更多意向客户了解到该企业的相关信息，高排名数量让高意向客户精准搜索到该企业，牛视智能营销获客系统给该企业带来众多精准客户，助力企业业绩大幅提升。',
                    nameCaseBgiMG: 'https://static.pdwl.net/jituan/images/digitalEmployee/icon10.png',
                    industry: '传统制造-建材家装',
                },
                {
                    nameCase: '临沂领杰包装有限公司 ',
                    details: '领杰包装有限公司，自使用牛视系统以来，系统通过企业号运营、AI智能剪辑、智能发布、流量扶持、全媒体运营、AI智能触客等营销方式。截止目前，该账号主页访问量3001.7w，新增粉丝共计9541人，粉丝数量达到1621w，牛视为该公司解决了营销、推广、获客、视频制作等营销痛点。牛视是一套真正的高效率、低成本、效果好、一站式精细化企业号运营平台，助力企业做好短视频营销，提升企业业绩 ',
                    nameCaseBgiMG: 'https://static.pdwl.net/jituan/images/digitalEmployee/icon10.png',
                    industry: '传统制造-包装印刷',
                }
            ],
            processList:[
                {
                    icon:'https://static.pdwl.net/jituan/images/digitalEmployee/icon11.png',
                    name:'在线咨询',
                },
                {
                    icon:'https://static.pdwl.net/jituan/images/digitalEmployee/icon13.png',
                    name:'需求沟通',
                },
                {
                    icon:'https://static.pdwl.net/jituan/images/digitalEmployee/icon14.png',
                    name:'签约合作',
                },
                {
                    icon:'https://static.pdwl.net/jituan/images/digitalEmployee/icon15.png',
                    name:'系统培训',
                },
                {
                    icon:'https://static.pdwl.net/jituan/images/digitalEmployee/icon16.png',
                    name:'售后跟踪',
                },
            ]
        }
    },
    beforeCreate(){
        let imgs = [
            "https://static.pdwl.net/jituan/images/zixun.png",
            "https://static.pdwl.net/jituan/images/zixun.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon4.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon3.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon7.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon1.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon2.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon10.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon11.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon13.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon14.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon15.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon16.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon8.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon9.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon18.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon6.png",
            "https://static.pdwl.net/jituan/images/digitalEmployee/icon17.png",
        ]
        imgs.forEach((item)=>{
            let img = new Image();
            img.src = item;
            img.onload = function(){}
        })
    },
    mounted() {
        var wow = new this.$WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: false,
            live: true,
            scrollContainer: null
        })
        wow.init();
        this.initSwiper()
    },
    methods: {
        openInfoDialog(){
            this.$refs.infoDialog.openInfoDialog()
        },
        initSwiper() {
            new Swiper('.swiper-container', {
                // loop: true,
                // // 如果需要分页器
                // pagination: '.swiper-pagination',
                // // 如果需要前进后退按钮
                // nextButton: '.swiper-button-next',
                // prevButton: '.swiper-button-prev',
                // // 如果需要滚动条
                // // scrollbar: '.swiper-scrollbar',
                // //如果需要自动切换海报
                autoplay: {
                    delay: 3000,//时间 毫秒
                    disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true
                },
                 // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.content-case-study-data-next',
                    prevEl: '.content-case-study-data-prev'
                },
                slidesPerView: 1,
                spaceBetween: 30,
                centeredSlides: false,
                loop: true,
                grabCursor: true,
                // pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true,
                // },
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.digitalEmployee {
    .digitalEmployee-top {
        background-image: url('https://static.pdwl.net/jituan/images/digitalEmployee/icon8.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        height: 720px;
        width: 100%;
        position: relative;

        &-l {
            position: absolute;
            left: 17%;
            top: 200px;

            &-title {
                font-size: 80px;
                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
            }

            &-setails {
                font-size: 48px;
                font-family: Microsoft YaHei-Light, Microsoft YaHei;
                font-weight: 300;
                color: #FFFFFF;
                line-height: 16px;
                letter-spacing: 4px;
                margin-top: 40px;
            }

            &-consulting {
                margin-top: 80px;
            }
        }
    }
    .digitalEmployee-content{
        .content-times{
            background-image: url('https://static.pdwl.net/jituan/images/digitalEmployee/icon9.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            height: 740px;
            width: 100%;
            position: relative;
            &-data{
                text-align: center;
                div:first-child{
                    font-size: 80px;
                    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 94px;
                } 
                div:last-child{
                    font-size: 60px;
                    margin-top: 20px;
                    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 70px;
                    
                }
            }
        }
        .content-anchor{
            &-data{
                width: 70%;
                margin: 0 auto;
                position: relative;
                &-r{
                    width: 50%;
                    // height: 574px;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: fill;
                        background-size: 100% 100%;

                    }
                }
            }
        }
        .content-expert{
            width: 70%;
            margin: 0 auto;
            height: 633px;
            position: relative;
            background-image: url('https://static.pdwl.net/jituan/images/digitalEmployee/icon18.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            text-align: center;
            &-data{
                height: 440px;
                &-l{
                    width: 563px;
                    height: 340px;
                    background-image: url('https://static.pdwl.net/jituan/images/digitalEmployee/icon6.png');
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 100% 100%;
                    text-align: center;
                    img{
                        width:430px;
                        height: 288px;
                        margin: 10px auto 0;
                        background-size: 100% 100%;
                    }
                }
            }
        }
        .content-assistant{
            width: 70%;
            margin: 0 auto;
            &-data{
                height: 440px;
                &-r{
                    width: 563px;
                    height: 340px;
                    background-image: url('https://static.pdwl.net/jituan/images/digitalEmployee/icon6.png');
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 100% 100%;
                    text-align: center;
                    img{
                        width:430px;
                        height: 288px;
                        margin: 10px auto 0;
                        background-size: 100% 100%;
                    }
                }
            }

        }
        .content-case-study{
            width: 100%;
            height: 689px;
            background-image: url('https://static.pdwl.net/jituan/images/digitalEmployee/icon17.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            text-align: center;
            &-data{
                width: 70%;
                margin: 0 auto;
                position: relative;
                &-next,&-prev{
                    width: 70px;
                    height: 70px;
                    cursor: pointer;
                    img{
                        width: 70px;
                        height: 70px;
                        background-size: 100% 100%;
                    }
                }
                &-bg{
                    width: calc(100% - 200px);
                    height: 286px;
                    background-color: rgba(255, 255, 255, .1);
                    position: absolute;
                    left: 100px;
                    bottom: -20px;
                }
                .swiper-slide{
                    padding:0 0px;
                    img{
                        width: 550px;
                        height: 360px;
                        margin-left: 40px;
                        background-size: 100% 100%;
                    }
                    &-data{
                        height: 100%;
                        margin-right: 40px;
                        margin-left: 40px;
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        justify-content: space-around;
                        text-align: left;
                        &-title{
                            font-size: 24px;
                            font-weight: bold;
                            color: #FFFFFF;
                            line-height: 28px;
                        }
                        &-industry{
                            font-size: 16px;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 16px;
                            margin-top: 10px;
                        }
                        &-details{
                            font-size: 18px;
                            font-weight: 400;
                            color: rgba(255,255,255,0.9);
                            line-height: 24 px;
                        }
                    }
                }
            }
        }
        .content-case-process{
            width: 70%;
            margin: 0 auto;
            &-data{
                &-list{
                    &-item{
                        transition: all .3;
                        &-img{
                            .flow{
                                width: 48.14px;
                                height: 28.28px;
                                background-size: 100% 100%;
                                margin:0 51px;
                            }
                            .icon{
                                width: 137px;
                                height: 128px;
                                background-size: 100% 100%;
                                transition: all .3;
                                cursor: pointer;
                            }
                        }
                        &-name{
                            font-size: 20px;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 23px;
                            letter-spacing: 2px;
                            cursor: pointer;
                            width: 137px;
                            text-align: center;
                            margin-top: 10px;
                            transition: all .3;
                        }
                        &:hover{
                            .icon{
                                transform:  scale(1.1);
                            }
                            .content-case-process-data-list-item-name{
                                transform: scale(1.1);
                            }
                        }
                    }

                }
            }
        }
        .copy-writing{
            width: 500px;
            margin-right: 0;
            height: 380px;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            div{
                background: linear-gradient(90deg, #000000 0%, rgba(20,22,25,0) 100%);
                border-radius: 6px ;
                border: 1px solid;
                border-image: linear-gradient(90deg, rgba(0, 111, 255, 1), rgba(98, 222, 166, 1)) 1 1;
                font-size: 18px;
                font-weight: 400;
                color: #FFFFFF;
                width: 420px;
                height: 72px;
                line-height: 72px;
                text-align: center;
                border-radius: 5px;
                cursor: pointer;
                transition: all .3s;
                margin: 0 auto;
                &:first-child{
                    margin-top: 0;
                }

            }
            div:hover{
                width: 450px;
                height: 92px;
                background: linear-gradient(90deg, #006FFF 0%, #62DEA6 100%);
                border-radius: 6px;
                font-size: 24px;
                border: 1px solid;
                border-radius: 5px;
                line-height: 92px;
                text-align: center;
                border-image: linear-gradient(90deg, rgba(0, 111, 255, 1), rgba(98, 222, 166, 1)) 1 1;

            }
        }
        .copy-writing1{
            height: 500px;
        }
    }
    .swiper-container{
        width: calc(100% - 200px);
        height: 360px;
        .swiper-wrapper{
            width: 400px !important;
        }
    }
}
</style>
